import React, { useCallback } from 'react';
import Particles from '@tsparticles/react';
import { loadSlim } from '@tsparticles/slim';

const LegalParticlesBackground = ({ type = 'default' }) => {
  const particlesInit = useCallback(async engine => {
    await loadSlim(engine);
  }, []);

  const getParticlesConfig = () => {
    switch (type) {
      case 'lawBooks':
        return {
          particles: {
            number: {
              value: 10,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: "#a67c00"
            },
            shape: {
              type: "char",
              character: {
                value: ["⚖️", "🔨", "📚", "📜", "⚔️", "🛡️"],
                font: "Verdana",
                style: "",
                weight: "400",
                fill: true
              }
            },
            opacity: {
              value: 0.5,
              random: true,
              anim: {
                enable: true,
                speed: 0.5,
                opacity_min: 0.1,
                sync: false
              }
            },
            size: {
              value: 20,
              random: true,
              anim: {
                enable: true,
                speed: 2,
                size_min: 10,
                sync: false
              }
            },
            move: {
              enable: true,
              speed: 1,
              direction: "none",
              random: true,
              straight: false,
              out_mode: "out",
              bounce: false
            }
          },
          interactivity: {
            detect_on: "canvas",
            events: {
              onhover: {
                enable: true,
                mode: "bubble"
              },
              onclick: {
                enable: true,
                mode: "repulse"
              },
              resize: true
            },
            modes: {
              bubble: {
                distance: 100,
                size: 25,
                duration: 2,
                opacity: 0.8
              },
              repulse: {
                distance: 100,
                duration: 0.4
              }
            }
          },
          retina_detect: true
        };
      case 'dustyParchment':
        return {
          particles: {
            number: {
              value: 40,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: ["#f8f0dd", "#ede4cb", "#e0d1ae"]
            },
            shape: {
              type: "circle"
            },
            opacity: {
              value: 0.3,
              random: true,
              anim: {
                enable: false
              }
            },
            size: {
              value: 4,
              random: true,
              anim: {
                enable: false
              }
            },
            move: {
              enable: true,
              speed: 0.5,
              direction: "top",
              random: false,
              straight: false,
              out_mode: "out",
              bounce: false
            }
          },
          interactivity: {
            detect_on: "canvas",
            events: {
              onhover: {
                enable: true,
                mode: "bubble"
              },
              resize: true
            },
            modes: {
              bubble: {
                distance: 150,
                size: 6,
                duration: 2,
                opacity: 0.5
              }
            }
          },
          retina_detect: true
        };
      case 'adventureSparks':
        return {
          particles: {
            number: {
              value: 40,
              density: {
                enable: true,
                value_area: 1000
              }
            },
            color: {
              value: ["#8b0000", "#1a2b48", "#5c8374", "#a67c00"]
            },
            shape: {
              type: "circle",
            },
            opacity: {
              value: 0.7,
              random: true,
              anim: {
                enable: true,
                speed: 0.5,
                opacity_min: 0.1,
                sync: false
              }
            },
            size: {
              value: 3,
              random: true,
              anim: {
                enable: true,
                speed: 2,
                size_min: 0.1,
                sync: false
              }
            },
            line_linked: {
              enable: true,
              distance: 80,
              color: "#a67c00",
              opacity: 0.2,
              width: 1
            },
            move: {
              enable: true,
              speed: 2,
              direction: "none",
              random: true,
              straight: false,
              out_mode: "bounce",
              bounce: false,
              attract: {
                enable: false,
                rotateX: 600,
                rotateY: 1200
              }
            }
          },
          interactivity: {
            detect_on: "canvas",
            events: {
              onhover: {
                enable: true,
                mode: "grab"
              },
              onclick: {
                enable: true,
                mode: "push"
              },
              resize: true
            },
            modes: {
              grab: {
                distance: 100,
                line_linked: {
                  opacity: 0.7
                }
              },
              push: {
                particles_nb: 4
              }
            }
          },
          retina_detect: true
        };
      default:
        return {
          particles: {
            number: {
              value: 30,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: "#a67c00"
            },
            shape: {
              type: "circle",
            },
            opacity: {
              value: 0.3,
              random: true
            },
            size: {
              value: 3,
              random: true
            },
            move: {
              enable: true,
              speed: 1,
              direction: "none",
              random: true,
              straight: false,
              out_mode: "out",
              bounce: false
            }
          },
          interactivity: {
            detect_on: "canvas",
            events: {
              onhover: {
                enable: true,
                mode: "bubble"
              },
              resize: true
            },
            modes: {
              bubble: {
                distance: 100,
                size: 5,
                duration: 2,
                opacity: 0.8
              }
            }
          },
          retina_detect: true
        };
    }
  };

  return (
    <div style={{ position: "absolute", width: "100%", height: "100%", top: 0, left: 0, zIndex: 0 }}>
      <Particles
        id="tsparticles"
        options={getParticlesConfig()}
        init={particlesInit}
      />
    </div>
  );
};

export default LegalParticlesBackground; 